<html>
<head>
    <meta charset="utf-8" />
    <meta
            name="viewport"
            content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <!--
  ArcGIS API for JavaScript, https://js.arcgis.com
  For more information about the view-padding sample, read the original sample description at developers.arcgis.com.
  https://developers.arcgis.com/javascript/latest/sample-code/view-padding/index.html
  -->
    <title>View padding | Sample | ArcGIS API for JavaScript 4.16</title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        #sidebar {
            z-index: 99;
            position: absolute;
            top: 0;
            right: 0;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            width: 320px;
        }

        #text {
            color: white;
            padding: 3%;
        }
    </style>

    <link rel="stylesheet" href="/js/arcgisjsapi/4.16/esri/css/main.css">
    <link rel="stylesheet" href="/js/arcgisjsapi/4.16/esri/css/view.css">
    <link
            rel="stylesheet"
            href="/js/arcgisjsapi/4.16/esri/themes/light/main.css"
    />

    <script type="text/javascript">
        dojoConfig = {
            baseUrl:"localhost:8088/js/arcgisjsapi/4.16/dojo",
            async:true,
            parseOnLoad: true,
            packages: [{
                name: 'arcgis',
                location: "/js/arcgisjsapi/4.16"
            }]
        };
    </script>

    <script src="/js/arcgisjsapi/4.16/init.js"></script>

    <script src="/js/arcgisjsapi/4.16/"></script>

    <script src="/js/arcgisjsapi/4.16/dojo/dojo.js"
            data-dojo-config="async:true"></script>


    <script>
        require([
            "arcgis/esri/layers/WebTileLayer",
            "arcgis/esri/Map",
            "arcgis/esri/Basemap",
            "arcgis/esri/widgets/BasemapToggle",
            "arcgis/esri/views/SceneView",
            "arcgis/esri/layers/KMLLayer"
        ], function(WebTileLayer, Map, Basemap, BasemapToggle, SceneView,
                    KMLLayer) {
            // Create a WebTileLayer with a third-party cached service
            var mapBaseLayer = new WebTileLayer({
                urlTemplate:
                    "https://stamen-tiles-{subDomain}.a.ssl.fastly.net/terrain/{level}/{col}/{row}.png",
                subDomains: ["a", "b", "c", "d"],
                copyright:
                    'Map tiles by <a href="http://stamen.com/">Stamen Design</a>, ' +
                    'under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. ' +
                    'Data by <a href="http://openstreetmap.org/">OpenStreetMap</a>, ' +
                    'under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>.'
            });

            var kml = new KMLLayer({
                url: "http://quickmap.dot.ca.gov/data/lcs.kml"// url to the service
            });
            // Create a Basemap with the WebTileLayer. The thumbnailUrl will be used for
            // the image in the BasemapToggle widget.

         //   var basemap = new Basemap({
           //     portalItem: {
           //         id: "8dda0e7b5e2d4fafa80132d59122268c"  // WGS84 Streets Vector webmap
               // }
          //  });

            var stamen = new Basemap({
                baseLayers: [kml],
                title: "Terrain",
                id: "terrain",
                portalItem: {
                    id: "8dda0e7b5e2d4fafa80132d59122268c"  // WGS84 Streets Vector webmap
                }
             //   thumbnailUrl:
                //    "https://stamen-tiles.a.ssl.fastly.net/terrain/10/177/409.png"
            });

            var map = new Map({
              //  basemap: "satellite",
                layers:[kml],
                basemap:"terrain",
                ground: "world-elevation"
            });


            var initCamera = {
                heading: 124.7,
                tilt: 65,//82.9,
                position: {
                    latitude: 40.713906,
                    longitude: -111.848111,
                    z: 4990
                }
            };

            var view = new SceneView({
                container: "viewDiv",
                map: map,
                camera: initCamera
            });

            view.on("click", function (event) {
                view.goTo({
                    center: [-126, 49],
                    zoom: 15
                });
            });

            view.on("key-down", function(event){
                console.log("key-down", event);

                if (event.key === "a"){
                    var zm = view.zoom + 1;
                    alert("keydown");

                    view.goTo({
                        target: view.center,
                        zoom: zm
                    });
                }
                else if(event.key == "s"){
                    var zm = view.zoom - 1;

                    view.goTo({
                        target: view.center,
                        zoom: zm
                    });
                }
            });
            view.when(function() {

                alert(map.layers.length);

                try {
                    document
                        .getElementById("elevationInput")
                        .addEventListener("change", updateElevation);


                    function updateElevation(ev) {
                        // Turn ground layers visibility on/off
                        map.ground.layers.forEach(function (layer) {
                            layer.visible = ev.target.checked;
                        });
                    }

                }
                catch (e) {
                    alert(e);
                }
                // Add a basemap toggle widget to toggle between basemaps
                var toggle = new BasemapToggle({
                    titleVisible: true,
                    view: view,
                    nextBasemap: stamen
                });

                // Add widget to the top right corner of the view
                view.ui.add(toggle, "top-left");


            });
        });

        var hybrid= new Basemap({
            baseLayers: [mapBaseLayer],
            title: "hybrid",
            id: "hybrid",
            thumbnailUrl:
                "https://stamen-tiles.a.ssl.fastly.net/terrain/10/177/409.png",
            nextBasemap: toggle
        });

        view.ui.add(hybrid, "top-left");


    </script>
</head>

<body>
<div id="viewDiv">
    <div id="sidebar" class="esri-widget">
        <div id="text">
            <h1>Liberty Island</h1>
            <p>
                Note that setting the view.padding makes the view.center,
                view.extent etc work off a subsection of the full view.
            </p>
            <p>Try to resize the window to get a better understanding.</p>
        </div>
        <div id="elevationDiv" class="esri-widget">
            <label
            >Elevation: <input id="elevationInput" type="checkbox" checked="yes" />
            </label>
        </div>
    </div>
</div>
</body>
</html>